<template>
    <div class="madp-buy-btn" v-if="showBtn">
        <div class="open-btn" v-if="!isShowLaugh">
            <div class="btn" @click="jumpToDown">{{ btnText }}</div>
        </div>
        <div class="open-btn" v-else>
            <wx-open-launch-app id="launch-app-btn" appid="wx2a01be563c1754a9" :extinfo="extinfo">
                <script type="text/wxtag-template">
                    <style>
                      .btn {
                        font-size: 16px;
                        width: 145px;
                        text-align: center;
                        display: inline-block;
                        border-radius: 20px;
                        padding: 10px 0;
                        background: linear-gradient(#f56969, #e53b3b);
                        color: #ffffff;
                      }
                      </style>
                    <div class="btn">{{ btnText }}</div>
                </script>
            </wx-open-launch-app>
        </div>
        <div class="popver" v-if="showPop" @click="showPop = false">
            <img v-if="mobileSys == 'ios'" src="@/assets/img/down1.png" alt="" srcset="" />
            <img v-if="mobileSys == 'android'" src="@/assets/img/down2.png" alt="" srcset="" />
        </div>
    </div>
</template>
<script>
    import * as Utils from '@/utils/util';
    let Base64 = require('js-base64').Base64;
    export default {
        components: {},
        data() {
            return {
                showBtn: false,
                isShowLaugh: false,
                mobileSys: '',
                showPop: false,
                extinfo: ''
            };
        },
        props: {
            prodInfo: {
                type: Object,
                default: () => {
                    return {};
                }
            },
            prodType: {
                type: String | Number,
                default: ''
            },
            btnText: {
                type: String,
                default: '购买'
            }
        },
        watch: {
            prodInfo: function () {
                this.getExtinfo();
            }
        },
        mounted() {
            this.getExtinfo();
        },
        activated() {
            // 移动端 非企业微信环境中
            if (this.$utils.isMobile() && !this.$utils.isComWx()) {
                this.showBtn = true;
            }
            if (this.$utils.pageEnv() == 'wx-mobile') {
                this.isShowLaugh = true;
                this.$nextTick(() => {
                    var btn = document.getElementById('launch-app-btn');
                    btn.addEventListener('launch', (e) => {
                        console.log('success');
                        console.log(this.extinfo);
                        this.sensorsSend();
                    });
                    btn.addEventListener('error', (e) => {
                        if (this.$utils.isWx() && this.$utils.isMobile()) {
                            this.mobileSys = Utils.mobileSys();
                            this.showPop = true;
                            this.sensorsSend();
                        }
                    });
                });
            } else {
                this.isShowLaugh = false;
            }
        },
        methods: {
            getExtinfo() {
                if (this.prodType == 1) {
                    // 理财
                    let obj = {
                        ProductName: this.prodInfo.name,
                        ProductCode: this.prodInfo.code,
                        ManagerId: this.$store.state.vuex_wxUserId
                    };
                    this.extinfo = `financeDetail?productInfo=${Base64.encode(encodeURI(JSON.stringify(obj)))}`;
                } else if (this.prodType == 2) {
                    // 基金
                    let obj = {
                        ProductName: this.prodInfo.name,
                        ProductCode: this.prodInfo.code,
                        ManagerId: this.$store.state.vuex_wxUserId
                    };
                    this.extinfo = `fundDetail?productInfo=${Base64.encode(encodeURI(JSON.stringify(obj)))}`;
                } else if (this.prodType == 3) {
                    // 幸福通知存
                    this.extinfo = `WeekHome?`;
                } else if (this.prodType == 4) {
                    // 整存整取：
                    this.extinfo = `ZczqHome?`;
                } else if (this.prodType == 5) {
                    // 通知存款
                    this.extinfo = `depositHome?`;
                } else if (this.prodType == 6) {
                    // 零存整取
                    this.extinfo = `LczqHome?`;
                } else if (this.prodType == 7) {
                    // 零存整取
                    this.extinfo = `XfcdHome?`;
                }
            },
            jumpToDown() {
                this.$router.push({
                    path: '/public-page/down-app-page',
                    query: {
                        prodInfo: JSON.stringify(this.prodInfo),
                        prodType: this.prodType
                    }
                });
            },
            // 数据采集
            sensorsSend() {
                let { code, name, reserve1, cycleDays, taCode, prdTemplate, productDate } = this.prodInfo;
                let typeArr = ['', '理财', '基金', '幸福通知存', '整存整取', '通知存款', '零存整取'],
                    codeArr = ['', 'FinancialBuyClick', 'FinancialBuyClick', 'DepositInClick', 'DepositInClick', 'DepositInClick', 'DepositInClick'],
                    numberArr = ['', '', '', 31, 32, 33, 35],
                    buy_period = '',
                    obj = {
                        from_page_name: sessionStorage.getItem('from_page_name') || '',
                        recommend_id: this.$store.state.vuex_wxUserId
                    };
                if (Number(this.prodType) <= 2) {
                    if ((reserve1 == '1301' && cycleDays) || reserve1 != '1301') {
                        if (taCode == 'Y5') {
                            buy_period = String(taCode);
                        } else if (prdTemplate == '1' && ['1700', '1309'].includes(reserve1)) {
                            buy_period = '灵活申赎';
                        } else if (reserve1 == '1301' && cycleDays) {
                            buy_period = '每' + String(cycleDays) + '天开放';
                        } else if (reserve1 == '1401') {
                            buy_period = '每月开放';
                        } else if (!['1', '2'].includes(prdTemplate)) {
                            buy_period = String(productDate);
                        }
                    }
                    obj.financial_code = code;
                    obj.financial_name = name;
                    obj.financial_type = typeArr[Number(this.prodType)];
                    obj.buy_period = buy_period;
                } else {
                    obj.deposit_number = numberArr[Number(this.prodType)];
                    obj.deposit_name = typeArr[Number(this.prodType)];
                    obj.deposit_type = typeArr[Number(this.prodType)];
                }
                this.$sensorsSend(codeArr[Number(this.prodType)], obj);
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-buy-btn {
        .open-btn {
            position: fixed;
            bottom: 40px;
            width: 100%;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .btn {
            font-size: 16px;
            width: 145px;
            text-align: center;
            display: inline-block;
            border-radius: 20px;
            padding: 10px 0;
            background: linear-gradient(#f56969, #e53b3b);
            color: #ffffff;
        }
        .popver {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100vh;
            z-index: 10;
            background: rgba(0, 0, 0, 0.5);
            img {
                float: right;
                margin-right: 10px;
                width: 70%;
            }
        }
    }
</style>
